<template>
  <div>
    <!-- 新增专题里视频课程
    <el-button @click="showFormDialog" type="primary"
      >新增专题视频课程</el-button
    >
    <el-divider content-position="left">专题视频课程列表</el-divider> -->

    <!-- 表格 -->
    <el-table :data="courses" style="width: 100%">
      <el-table-column prop="title" label="课程标题" width="180">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column prop="vimg" label="课程图片" width="180">
        <template slot-scope="scope">
          <img
            :src="'https://sheisi.love' + scope.row.vimg"
            width="100px"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column prop="vtime" label="课程时间">
        <template slot-scope="scope"> {{ scope.row.vtime }}分钟 </template>
      </el-table-column>
      <el-table-column prop="Kcal" label="燃烧卡路里">
        <template slot-scope="scope"> {{ scope.row.Kcal }}卡路里 </template>
      </el-table-column>
      <el-table-column prop="exp" label="经验">
        <template slot-scope="scope">
          {{ scope.row.exp }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- <template slot-scope="scope" key=""> -->
          <!-- <el-button
            size="small"
            type="info"
            icon="el-icon-view"
            circle
          ></el-button> -->

          <!-- <el-button
          
            size="small"
            type="success"
            icon="el-icon-plus"
            circle
          ></el-button> -->

          <!-- <el-button
            size="small"
            type="warning"
            icon="el-icon-s-grid"
            circle
          ></el-button> -->

          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        <!-- </template> -->
      </el-table-column>
    </el-table>

    <!-- 自定义对话框 -->
    <!-- <el-dialog title="新增专题视频课程" :visible.sync="dialogFormVisible">
      <el-form
        :rules="rules"
        ref="form"
        style="padding-right: 40px"
        :model="form"
        label-width="100px"
      >
        <el-form-item label="课程标题" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程图片" prop="vimg">
          <el-upload
            class="avatar-uploader"
            name="sbb"
            :action="`${UPLOADURL}/upload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.vimg" :src="form.vimg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="课程时间" prop="vtime">
          <el-input v-model="form.vtime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="燃烧卡路里" prop="Kcal">
          <el-input v-model="form.Kcal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="推荐经验" prop="vtype">
          <el-select v-model="form.exp" placeholder="请选择类型">
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      courses: [],
      types: [
        {
          value: "零基础",
          label: "零基础",
        },
        {
          value: "初级",
          label: "初级",
        },
        {
          value: "中级",
          label: "中级",
        },
        {
          value: "高级",
          label: "高级",
        },
      ],
      dialogFormVisible: false, // 控制是否显示表单对话框
      form: {
        title: "",
        vimg: "",
        vtime: "",
        Kcal: "",
        exp: "",
        zt_id: this.$route.query.zt_id,
      },
      // rules: {
      //   title: [{ required: true, message: "必填", trigger: "blur" }],
      //   vimg: [{ required: true, message: "必选", trigger: "blur" }],
      //   vtime: [{ required: true, message: "必填", trigger: "blur" }],
      //   Kcal: [{ required: true, message: "必填", trigger: "blur" }],
      //   exp: [{ required: true, message: "必选", trigger: "blur" }],
      // },
    };
  },
  mounted() {
    this.videoLessonList();
  },
  methods: {
    /** 列出视频课程列表 */
    videoLessonList() {
      let zt_id = this.form.zt_id;
      // console.log(zt_id);
      httpApi.videolessonApi.listVideoLessons({ zt_id }).then((res) => {
        console.log("视频课程列表:", res);
        this.courses = res.data.data;
      });
    },

    /** 提交新增视频课程的表单 */
    // submit() {
    //   this.$refs.form.validate((valid) => {
    //     if (valid) {
    //       let params = {
    //         title: this.form.title,
    //         vimg: this.form.vimg,
    //         vtime: this.form.vtime,
    //         Kcal: this.form.Kcal,
    //         exp: this.form.exp,
    //       };
    //       httpApi.videolessonApi.add(params).then((res) => {
    //         console.log("新增的视频课程：", res);
    //         if (res.data.code == 200) {
    //           this.$message({ message: "成功", type: "success" });
    //           this.dialogFormVisible = false;
    //           // 重新加载列表
    //           this.videoLessonList();
    //         } else {
    //           this.$message({ message: "失败，请稍后重试", type: "error" });
    //         }
    //       });
    //     }
    //   });
    // },

    // /**加载自定义对话框 */
    // showFormDialog() {
    //   this.dialogFormVisible = true; //显示对话框
    // },

    // /**上传成功后执行 */
    // handleAvatarSuccess(res, file) {
    //   console.log(res);
    //   // 将上传成功的图片访问路径赋值传给form对象的属性
    //   this.form.vimg = res.pic;
    // },

    // /**图片上传之前执行 */
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  height: 178px;
  display: block;
}
</style>
